<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码</title>

    <style>
        #b {
            width: 30px;
            height: 20px;
            position: absolute;
            left: 860px;
            top: 110px;
            background: url(https://img2.233.com/passport/v1.2.2/pcimg/little_picture.png) -567px 0px;
        }
        
        #pwd {
            border: none;
            outline: none;
            border-bottom: 1px solid;
        }
    </style>


</head>

<body>

    <div style="margin: 100px auto; text-align: center;">
        <input id="pwd" type="password">
        <div id="b"></div>

    </div>




</body>
<script>
    var f = document.getElementById('b');
    var pwd = document.getElementById('pwd');

    var flag = 0;
    f.onclick = function() {
        if (flag == 0) {
            pwd.type = 'text';

            b.style.background = 'url(https://img2.233.com/passport/v1.2.2/pcimg/little_picture.png) -567px 0px';
            flag = 1;
        } else {
            pwd.type = 'password';
            b.style.background = 'url(https://img2.233.com/passport/v1.2.2/pcimg/little_picture.png) -525px 0px';
            flag = 0;
        }
    }
</script>

</html>